<template>
	<view class="">
		<u-popup v-model="showUser" safe-area-inset-bottom @close="showUser = false" mode="right"
			:safeAreaInsetTop="true">
			<view :style="{ height: 44+ height + 'px', background: '#fff' }"></view>
			<view class="mcBox" :style="{height: `calc(100vh - 100rpx - 44px - ${height}px)`}">
				<view class="search pl30 pr30">
					<view class="mb20" @click="showUser=false">
						<u-icon name="arrow-left"></u-icon>
					</view>
					<u-search placeholder="请输入手机号" v-model="name" :animation="true" @search="searchEvent"
						@custom="searchEvent" @blur="searchEvent" :action-style="{color:'#222'}"
						:clearabled="false"></u-search>
				</view>
				<view class="userlist mt36 mb50">
					<scroll-view scroll-y="true" style="height: 100%;">
						<view class="mcName  pl30 pr30" v-for="item,index in userlist" :key="index"
							@click="changeUser(item,index)">
							<view class="check">
								<u-icon name="checkmark" color="#2b85e4" size="40" v-if="item.checked"></u-icon>
							</view>
							<view :class="{chckt:item.checked}"
								style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
								<text>{{item.phone}}</text>
								<text>{{item.name}}</text>
							</view>
						</view>
					</scroll-view>

				</view>
				<view class="btn" @click="ok">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		userSelectApi
	} from './api.js'
	export default {
		options: {
			styleIsolation: "shared",
		},
		props: {
			multiple: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				showUser: false,
				name: '',
				all: false,
				userlist: [],
				form: {
					phone: ""
				},
				sel: []
			}
		},
		watch: {
			showUser(e) {
				if (!e) {
					return
				}
				this.getList()
			}
		},
		computed: {
			height() {
				return this.$u.sys().statusBarHeight;
			},
		},
		created() {
			
		},
		methods: {
			changeUser(val) {
				let arr
				if (this.multiple) {
					this.userlist.forEach((i, index) => {
						if (val.phone == i.phone) {
							i.checked = !i.checked
						}
					})
				} else {
					this.userlist.forEach((i, index) => {
						if (val.phone == i.phone) {
							i.checked = !i.checked
						} else {
							i.checked = false
						}
					})
				}

				arr = this.userlist.filter(ite => ite.checked == true)
				this.sel = arr
				this.$forceUpdate()
			},
			ok() {
				if (this.sel.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择用户'
					})
					return
				}
				this.showUser = false
				this.$emit('change', this.sel)
			},
			async searchEvent(val) {
				uni.showLoading({
					title:'请稍后...',
				})
				this.form.phone = val
				await this.getList()
				uni.hideLoading()
			},
			clear() {
				this.userlist.forEach((i, index) => {
					i.checked = false
				})
				this.getList()
			},
			async getList() {
				const {
					data
				} = await userSelectApi(this.form)
				this.userlist = data
				this.sel = []
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn {
		height: 60rpx;
		width: 90%;
		background: #2b85e4;
		border-radius: 8rpx;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
		margin: auto
	}

	.mcBox {
		width: 550rpx;
		height: 100%;
		overflow: auto;
		background: #fff;
		display: flex;
		flex-direction: column;

		/deep/ .u-search__action--active {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #2b85e4 !important;
			padding: 8rpx 22rpx;
			border-radius: 29rpx;
			color: #fff;
			font-size: 28rpx;
			margin-left: 20rpx;
		}

		.userlist {
			// height: calc(100vh - 350rpx);
			flex: 1;
			overflow: auto;

			.mcName {
				font-size: 32rpx;
				color: #222;
				display: flex;
				align-items: center;
				// height: 100rpx;
				padding: 30rpx 0;

				.check {
					margin-right: 10rpx;
				}

				.chckt {

					font-weight: bold;
					color: #2b85e4;
				}
			}
		}
	}
</style>